<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<%
	String path = request.getContextPath();
%>
	<div id="page-wrapper">
			<div id="page-inner">
			<c:if test="${manager.managerType == 1001}">
				<div class="row">
					<div class="col-md-4 col-sm-12 col-xs-12">
							<a class="panel panel-primary" href="#" onclick="openBodyHtml('<%=path%>/personInfo');$('#personA').click()">
							   	<div class="dashboard-tile detail tile-turquoise">
		                            <div class="content">
		                                <h1 class="text-left timer" id="vehicleDeviceCheckCount"></h1>
		                                <p>今日车载设备检查人数</p>
		                            </div>
		                            <div class="icon"><i class="fa fa fa-eye"></i></div>
		                        </div>
							</a>		
					</div>

					<div class="col-md-4 col-sm-12 col-xs-12">
							<a class="panel panel-primary" href="#" onclick="openBodyHtml('<%=path%>/personInfo');$('#personA').click()">
							   	<div class="dashboard-tile detail tile-blue">
		                            <div class="content">
		                                <h1 class="text-left timer" id="deviceCheckCount"></h1>
		                                <p>今日检查站检查人数</p>
		                            </div>
		                            <div class="icon"><i class="fa fa fa-eye"></i></div>
		                        </div>
							</a>
					</div>

					<div class="col-md-4 col-sm-12 col-xs-12">
							<a class="panel panel-primary" href="#" onclick="openBodyHtml('<%=path%>/personAlertInfo');$('#alertA').click()">
							   	<div class="dashboard-tile detail tile-red">
		                            <div class="content">
		                                <h1 class="text-left timer" id="todayAlertCount"></h1>
		                                <p>今日告警人数</p>
		                            </div>
		                            <div class="icon"><i class="fa fa fa-eye"></i></div>
		                        </div>
							</a>
					</div>
				</div>
				</c:if>
				<c:if test="${manager.managerType == 1002}">
					<div class="row">
					<div class="col-md-4 col-sm-12 col-xs-12">
						<a class="panel panel-primary" href="#" onclick="openBodyHtml('<%=path%>/personInfo');$('#personA').click()">
							   	<div class="dashboard-tile detail tile-blue">
		                            <div class="content">
		                                <h1 class="text-left timer" id="deviceCheckCount"></h1>
		                                <p>今日检查人数</p>
		                            </div>
		                            <div class="icon"><i class="fa fa fa-eye"></i></div>
		                        </div>
						</a>
					</div>

					<div class="col-md-4 col-sm-12 col-xs-12">
						<a class="panel panel-primary" href="#" onclick="openBodyHtml('<%=path%>/personAlertInfo');$('#alertA').click()">
							   	<div class="dashboard-tile detail tile-red">
		                            <div class="content">
		                                <h1 class="text-left timer" id="todayAlertCount"></h1>
		                                <p>今日告警人数</p>
		                            </div>
		                            <div class="icon"><i class="fa fa fa-eye"></i></div>
		                        </div>
						</a>
					</div>
				</div>
				</c:if>
				<c:if test="${manager.managerType == 1001}">
					<div class="row">
						<div class="col-sm-12 col-xs-12">
							<div class="panel panel-default chartJs">
								<div class="panel-heading">
									<div class="card-title">
										<div class="title">每个检查站总检查人数</div>
									</div>
								</div>
								<div id="statisticsLine" style="height: 400px;"></div>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-sm-6">
							<div class="panel panel-default chartJs">
								<div class="panel-heading">
									<div class="card-title">
										<div class="title">每个检查站当天检查人数比例</div>
									</div>
								</div>
								<div id="todayPersonBar"></div>
							</div>
						</div>
						<div class="col-sm-6">
							<div class="panel panel-default chartJs">
								<div class="panel-heading">
									<div class="card-title">
										<div class="title">车载设备和检查站检查人数比例</div>
									</div>
								</div>
								<div id="todayCheckBar"></div>
							</div>
						</div>
					</div>
					<div class="row">
					<div class="col-sm-12">
						<div class="panel panel-default chartJs">
							<div class="panel-heading">
								<div class="card-title">
									<div class="title">近30天车载设备和检查站检查人（车）数</div>
								</div>
							</div>
							<div id="sevenDaysLine" style="height: 500px;"></div>
						</div>
					</div>
				</div>
				</c:if>
				<c:if test="${manager.managerType == 1002}">	
					<div class="row">
						<div class="col-sm-12">
							<div class="panel panel-default chartJs">
								<div class="panel-heading">
									<div class="card-title">
										<div class="title">近30天检查人（车）数</div>
									</div>
								</div>
								<div id="sevenDaysLine" style="height: 500px;"></div>
							</div>
						</div>
					</div>
				</c:if>
			</div>
		</div>
<script>
	var managerType='${manager.managerType}';
	if(managerType=='1001'){
		var date = new Date();
		var todayDate = date.toLocaleDateString();
		//今天检查人数
		$.ajax({
			url: "<%=path%>getCheckCount",
		    timeout: 300000,
		    dataType: "json",
		    type: "post",
		    data: {"todayDate":todayDate},
		    success: function (data) {
		    	$("#vehicleDeviceCheckCount").html(data.vehicleDeviceCheckCount);
		    	$("#deviceCheckCount").html(data.deviceCheckCount);
		    }
		})
		$.ajax({
			url: "<%=path%>getCheckCount",
		    timeout: 300000,
		    dataType: "json",
		    type: "post",
		    success: function (data) {
		       	var labelArr=[];
		       	labelArr.push("车载设备检查人数");
		       	labelArr.push("检查站检查人数");
		    	var dataList=[];
		       	dataList.push({"name":"车载设备检查人数","y":data.vehicleDeviceCheckCount});
		      	dataList.push({"name":"检查站检查人数","y":data.deviceCheckCount});
	            $('#todayCheckBar').highcharts({
	            	chart: {
	                    type: 'pie',
	                    options3d: {
	                        enabled: true,
	                        alpha: 45,
	                        beta: 0
	                    }
	                },
			        title: {
			            text: ''
			        },
			        plotArea: {
			            shadow: null,
			            borderWidth: null,
			            backgroundColor: null
		         	},
		         	tooltip: {
		                formatter: function() {
		                   return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 1) +'% ('+
		                                Highcharts.numberFormat(this.y, 0, ',') +' 人)';
		                }
		            },
		            colors: ['#97FFFF', '#ADFF2F'],
			        plotOptions: {
			            pie: {
			                allowPointSelect: true,
			                cursor: 'pointer',
			                depth: 35,
			                dataLabels: {
			                    enabled: true,
			                    formatter: function() {
			 	                   return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 1) +'% ('+
			 	                                Highcharts.numberFormat(this.y, 0, ',') +' 人)';
			 	                },
			 	                style: {
//	 		 	                	fontSize:"12px"
			 	                }
			                },
		             		showInLegend:true//显示选择块
			            }
			        },
			        legend: {//控制图例显示位置
			        	enabled: false
			        },
			        series: [{
			            type: 'pie',
			            name: '人数',
			            data: dataList
			        }],
			        exporting: {
				    	enabled: false //隐藏导出图片  
				    },
				    credits: {
				    	enabled: false //隐藏highcharts的站点标志
				    }
			    });
		    }
		})
		//今天告警人数
		$.ajax({
			url: "<%=path%>getAlertCount",
		    timeout: 300000,
		    dataType: "json",
		    type: "post",
		    data: {"todayDate":todayDate},
		    success: function (data) {
		    	$("#todayAlertCount").html(data.alertCount);
		    }
		})
		
		//每个检查站总检查人数
	    $.ajax({
	    	url: "<%=path%>getStatistics",
	        timeout: 300000,
	        dataType: "json",
	        type: "post",
	        data: "",
	        success: function (data) {
	        	var labelArr=[];
	        	var personCountArr=[];
	        	var alertCountArr=[];
	            $.each(data.list, function (i, item) {
	            	labelArr.push(item.organizationName);
	            	personCountArr.push(item.personCount);
	            	alertCountArr.push(item.alertCount);
	            })
	            var chart = Highcharts.chart('statisticsLine', {
	            	chart: {
	    				type: 'column'
	    			},
	            	title: {
	                    text: ''
	                },
	            	xAxis: {
	                    categories: labelArr,
	                    max:labelArr.length>20?20:labelArr.length-1
	                },
				    yAxis: {
				        title: {
				            text: '人数'
				        },
				        min: 0,
				        minRange: 1
				    },
				    scrollbar: {
						enabled: labelArr.length>30?true:false
					},
				    legend: {
				        verticalAlign: 'top'
				    },
				    plotOptions: {
				        series: {
				            label: {
				                connectorAllowed: false
				            },
				            pointPadding:0
				        }
				    },
				    colors: ['#4A4AFF', '#FF0000'],
				    series: [{
				        name: '检查人数',
				        data: personCountArr
				    }, {
				        name: '告警人数',
				        data: alertCountArr
				    }],
				    responsive: {
				        rules: [{
				            condition: {
				                maxWidth: 500
				            },
				            chartOptions: {
				                legend: {
				                    layout: 'horizontal',
				                    align: 'center',
				                    verticalAlign: 'bottom'
				                }
				            }
				        }]
				    },
				    exporting: {
				    	enabled: false //隐藏导出图片  
				    },
				    credits: {
				    	enabled: false //隐藏highcharts的站点标志
				    }
				});
	            
	       	}
	    })
		//每个检查站当天检查人数
	   	$.ajax({
			url: "<%=path%>getTodayPersonCount",
		    timeout: 300000,
		    dataType: "json",
		    type: "post",
		    data: "",
		    success: function (data) {
	        	var labelArr=[];
	        	var personCountArr=[];
	            $.each(data.list, function (i, item) {
	            	labelArr.push(item.name);
	            	personCountArr.push(item.y);
	            })
	            
	            var scrollbarFlag=labelArr.length>10?true:false;
	            var chart = Highcharts.chart('todayPersonBar', {
	            	chart: {
	    				type: 'column'
	    			},
	            	title: {
	                    text: ''
	                },
	            	xAxis: {
	                    categories: labelArr,
	                    max:labelArr.length>8?8:labelArr.length-1
	                },
				    yAxis: {
				        title: {
				            text: '人数'
				        },
				        min: 0,
				        minRange: 1
				    },
				    scrollbar: {
						enabled: labelArr.length>8?true:false
					},
				    legend: {
				        verticalAlign: 'top'
				    },
				    plotOptions: {
				        series: {
				            label: {
				                connectorAllowed: false
				            }
				        },
				        column: {
				            dataLabels: {
				                enabled: true,
				                style : {
					                fontSize : 12,
					            }
				            }
				        }
				    },
				    colors: ['#4A4AFF', '#FF0000'],
				    series: [{
				        name: '检查人数',
				        data: personCountArr
				    }],
				    responsive: {
				        rules: [{
				            condition: {
				                maxWidth: 500
				            },
				            chartOptions: {
				                legend: {
				                    layout: 'horizontal',
				                    align: 'center',
				                    verticalAlign: 'bottom'
				                }
				            }
				        }]
				    },
				    exporting: {
				    	enabled: false //隐藏导出图片  
				    },
				    credits: {
				    	enabled: false //隐藏highcharts的站点标志
				    }
				});
		    }
		})
		
		//近30天检查人（车）数
	    $.ajax({
	    	url: "<%=path%>getSevenDaysPersonCount",
	        timeout: 300000,
	        dataType: "json",
	        type: "post",
	        data: "",
	        success: function (data) {
	        	var labelArr=[];
	        	var checkPersonCountArr=[];
	        	var deviceCheckPersonCountArr=[];
	        	var alertCountArr=[];
	        	var vehicleLicenseCountArr=[];
	            $.each(data.list, function (i, item) {
	            	labelArr.push(item.createDate);
	            	checkPersonCountArr.push(item.checkPersonCount);
	            	deviceCheckPersonCountArr.push(item.deviceCheckPersonCount);
	            	alertCountArr.push(item.alertCount);
	            	vehicleLicenseCountArr.push(item.vehicleLicenseCount);
	            })
	            var chart = Highcharts.chart('sevenDaysLine', {
	            	title: {
	                    text: ''
	                },
	            	xAxis: {
	                    categories: labelArr
	                },
				    yAxis: {
				        title: {
				            text: '人（车）数'
				        }
				    },
				    legend: {
				        verticalAlign: 'top'
				    },
				    plotOptions: {
				        series: {
				            label: {
				                connectorAllowed: false
				            }
				        },
				        line: {
				            dataLabels: {
				                enabled: true
				            },
				        }
				    },
				    colors: ['#4A4AFF', '#CD6600', '#677500', '#F67F55'],
				    series: [{
				        name: '车载设备检查人数',
				        data: deviceCheckPersonCountArr
				    }, {
				        name: '检查站检查人数',
				        data: checkPersonCountArr
				    }, {
				        name: '告警人数',
				        data: alertCountArr
				    }, {
				        name: '检查车辆数',
				        data: vehicleLicenseCountArr
				    }],
				    responsive: {
				        rules: [{
				            condition: {
				                maxWidth: 500
				            },
				            chartOptions: {
				                legend: {
				                    layout: 'horizontal',
				                    align: 'center',
				                    verticalAlign: 'bottom'
				                }
				            }
				        }]
				    },
				    exporting: {
				    	enabled: false //隐藏导出图片  
				    },
				    credits: {
				    	enabled: false //隐藏highcharts的站点标志
				    }
				});
	       	}
	    })
	}else if(managerType=='1002'){
		var date = new Date();
		var todayDate = date.toLocaleDateString();
		//今天检查人数
		$.ajax({
			url: "<%=path%>getCheckCount",
		    timeout: 300000,
		    dataType: "json",
		    type: "post",
		    data: {"todayDate":todayDate},
		    success: function (data) {
		    	$("#deviceCheckCount").html(data.deviceCheckCount);
		    }
		})
		$.ajax({
			url: "<%=path%>getAlertCount",
		    timeout: 300000,
		    dataType: "json",
		    type: "post",
		    data: {"todayDate":todayDate},
		    success: function (data) {
		    	$("#todayAlertCount").html(data.alertCount);
		    }
		})
		
		
		//近30天检查人（车）数
	    $.ajax({
	    	url: "<%=path%>getSevenDaysPersonCount",
	        timeout: 300000,
	        dataType: "json",
	        type: "post",
	        data: "",
	        success: function (data) {
	        	var labelArr=[];
	        	var checkPersonCountArr=[];
	        	var alertCountArr=[];
	        	var vehicleLicenseCountArr=[];
	            $.each(data.list, function (i, item) {
	            	labelArr.push(item.createDate);
	            	checkPersonCountArr.push(item.checkPersonCount);
	            	alertCountArr.push(item.alertCount);
	            	vehicleLicenseCountArr.push(item.vehicleLicenseCount);
	            })
	            var chart = Highcharts.chart('sevenDaysLine', {
	            	title: {
	                    text: ''
	                },
	            	xAxis: {
	                    categories: labelArr
	                },
				    yAxis: {
				        title: {
				            text: '人（车）数'
				        }
				    },
				    legend: {
				        verticalAlign: 'top'
				    },
				    plotOptions: {
				        series: {
				            label: {
				                connectorAllowed: false
				            }
				        },
				        line: {
				            dataLabels: {
				                enabled: true
				            },
				        }
				    },
				    colors: ['#4A4AFF', '#CD6600', '#677500', '#F67F55'],
				    series: [{
				        name: '检查人数',
				        data: checkPersonCountArr
				    }, {
				        name: '告警人数',
				        data: alertCountArr
				    }, {
				        name: '检查车辆数',
				        data: vehicleLicenseCountArr
				    }],
				    responsive: {
				        rules: [{
				            condition: {
				                maxWidth: 500
				            },
				            chartOptions: {
				                legend: {
				                    layout: 'horizontal',
				                    align: 'center',
				                    verticalAlign: 'bottom'
				                }
				            }
				        }]
				    },
				    exporting: {
				    	enabled: false //隐藏导出图片  
				    },
				    credits: {
				    	enabled: false //隐藏highcharts的站点标志
				    }
				});
	        }
	    })
	}
	
</script>		
